<template>
  <div>
    <el-row>
      <el-col :span="5" style="position:relative">
      <el-row v-if="projectId.length > 0"
              style="  position: absolute;top:10px;right:15px;z-index:9999"  @click="refreshProgress" alt="刷新">
        <el-link type="primary"  :underline="false" style="display:block"  >
                <el-icon><RefreshRight /></el-icon>
              </el-link>
      </el-row>
             
        <el-scrollbar
          :height="height"
          ref="scrollbarRef"
          v-loading="loading1"
          class="scrollbar"
          style="
            padding: 15px 10px;
            border: 2px solid rgb(182, 194, 226);
            border-radius: 10px;
          "
        >

          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :type="getTimeLineType(activity)"
              :color="activity.color"
              :timestamp="activity.progressName"
              placement="top"
            >
              <template #default>
                <!-- <div @click="handleTimelineItem(activity)">
                  <div>{{ activity.progressDate }}</div>
                  <div v-if="activity.progressRate" style="margin-top: 5px">
                    完成度：{{ activity.progressRate }}
                  </div>
                </div> -->
                <el-link :underline="false" @click="handleTimelineItem(activity)">
                  <div style="width: 100%">{{ activity.progressDate }}</div>
                  <div v-if="activity.progressRate" style="margin-top: 5px">
                    完成度：{{ activity.progressRate }}
                  </div>
                </el-link>
              </template>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </el-col>
      <el-col :span="19" style="padding-left: 5px">
        <el-scrollbar
          :height="height"
          style="padding: 5px; border: 2px solid rgb(182, 194, 226); border-radius: 10px"
        >
          <h4 style="text-align: center; margin: 10px 0" v-if="progressType">
            {{ progressName }}
          </h4>
          <template v-if="progressType == 1 || progressType == 2">
            <el-table border :data="list" ref="listTableRef" v-loading="loading2">
              <el-table-column label="序号" type="index" width="70" align="center" />
              <el-table-column label="当前节点" align="center" prop="taskName" />
              <!-- {{ scope.row.userStepId == 0 ? '现场填报' : scope.row.userStepId == 1 ? '复核' : '审核' }} -->
              <el-table-column
                show-overflow-tooltip
                label="开始时间"
                align="center"
                prop="createTime"
                width="180"
              />
              <el-table-column
                show-overflow-tooltip
                label="结束时间"
                align="center"
                prop="finishTime"
                width="180"
              />
              <el-table-column
                show-overflow-tooltip
                label="耗时"
                align="center"
                prop="duration"
                width="110"
              />
              <el-table-column
                label="操作人"
                align="center"
                prop="assigneeName"
                width="80"
              />
            </el-table>
          </template>
          <template v-if="progressType == 3">
            <el-row style="font-size: 14px; font-weight: 600">
              样品数: {{ countForm.sampleCount }}个　 已填报 {{ countForm.filled }}个　
              未填报{{ countForm.unfilled }}个　 现场表数量:{{
                countForm.siteTableCount
              }}　 已填报数量: {{ countForm.filledCount }}　 未填报:
              {{ countForm.unfilledCount }}
            </el-row>
            <template v-for="(item, index) in list" :key="index">
              <p class="pinformation" style="margin-top: 7px">{{ item.tableName }}</p>
              <el-table
                border
                :data="item.taskList"
                ref="listTableRef"
                v-loading="loading2"
              >
                <el-table-column label="序号" type="index" width="70" align="center" />
                <el-table-column
                  show-overflow-tooltip
                  label="名称"
                  align="center"
                  prop="title"
                />
                <el-table-column label="当前节点" align="center" width="150">
                  <template #default="scope">
                    {{
                      scope.row.userStepId == 0
                        ? "现场填报"
                        : scope.row.userStepId == 1
                        ? "复核"
                        : "审核"
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="开始时间"
                  align="center"
                  prop="createTime"
                  width="160"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="结束时间"
                  align="center"
                  prop="finishTime"
                  width="160"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="耗时"
                  align="center"
                  prop="duration"
                  width="110"
                />
                <el-table-column
                  label="操作人"
                  align="center"
                  prop="nickName"
                  width="80"
                />
              </el-table>
            </template>
          </template>
          <template v-if="progressType == 4">
            <el-row style="font-size: 14px; font-weight: 600">
              样品数: {{ countForm.sampleCount }}个　 已交接 {{ countForm.filled }}个　
              未交接{{ countForm.unfilled }}个　 交接批次:{{ countForm.withCount }}
            </el-row>
            <el-table border :data="list" ref="listTableRef" v-loading="loading2">
              <el-table-column label="序号" type="index" width="70" align="center" />
              <el-table-column
                show-overflow-tooltip
                label="批次"
                align="center"
                prop="title"
              />
              <el-table-column
                label="当前节点"
                align="center"
                width="150"
                prop="taskName"
              />
              <el-table-column
                show-overflow-tooltip
                label="开始时间"
                align="center"
                prop="createTime"
                width="160"
              />
              <el-table-column
                show-overflow-tooltip
                label="结束时间"
                align="center"
                prop="finishTime"
                width="160"
              />
              <el-table-column
                show-overflow-tooltip
                label="耗时"
                align="center"
                prop="duration"
                width="110"
              />
              <el-table-column
                label="操作人"
                align="center"
                prop="assigneeName"
                width="80"
              />
            </el-table>
          </template>
          <template v-if="progressType == 5">
            <el-row style="font-size: 14px; font-weight: 600">
              样品数: {{ countForm.sampleCount }}个　 已填报 {{ countForm.filled }}个　
              未填报{{ countForm.unfilled }}个
            </el-row>
            <el-table border :data="list" ref="listTableRef" v-loading="loading2">
              <el-table-column label="序号" type="index" width="70" align="center" />
              <el-table-column
                show-overflow-tooltip
                label="名称"
                align="center"
                prop="title"
              />
              <el-table-column label="当前节点" align="center" width="100">
                <template #default="scope">
                  {{
                    scope.row.userStepId == 0
                      ? "实验室填报"
                      : scope.row.userStepId == 1
                      ? "复核"
                      : "审核"
                  }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="开始时间"
                align="center"
                prop="createTime"
              />
              <el-table-column
                show-overflow-tooltip
                label="结束时间"
                align="center"
                prop="finishTime"
              />
              <el-table-column
                show-overflow-tooltip
                label="耗时"
                align="center"
                prop="duration"
              />
              <el-table-column label="操作人" align="center" prop="nickName" width="80" />
              <el-table-column
                show-overflow-tooltip
                label="备注"
                align="center"
                width="100"
              />
            </el-table>
          </template>
          <template v-if="progressType == 6">
            <template v-for="(item, index) in list" :key="index">
              <p class="pinformation" style="margin-top: 7px">
                报告编号：{{ item.reportCode }}
              </p>
              <el-table
                border
                :data="item.flowList"
                ref="listTableRef"
                v-loading="loading2"
              >
                <el-table-column label="序号" type="index" width="70" align="center" />
                <el-table-column label="当前节点" align="center" prop="taskName" />
                <!-- {{ scope.row.userStepId == 0 ? '现场填报' : scope.row.userStepId == 1 ? '复核' : '审核' }} -->
                <el-table-column
                  show-overflow-tooltip
                  label="开始时间"
                  align="center"
                  prop="createTime"
                  width="180"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="结束时间"
                  align="center"
                  prop="finishTime"
                  width="180"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="耗时"
                  align="center"
                  prop="duration"
                  width="110"
                />
                <el-table-column
                  label="操作人"
                  align="center"
                  prop="assigneeName"
                  width="80"
                />
              </el-table>
            </template>
          </template>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getTimeLine, getLineItem, getCountForm,getProgress } from "@/api/taskProgressDetails/index";
import { nextTick } from "vue";
const projectId = ref("");

const height = ref(0);
const activities = ref([]);
const loading1 = ref(false);

const list = ref([]);
const loading2 = ref(false);
const progressType = ref(0);
const timeLineTypes = ref(["primary", "success", "warning", "danger", "info"]);
const progressName = ref();

const countForm = ref({});

const { proxy } = getCurrentInstance();
function getTableHeight() {
  height.value = proxy.getSubFileHeight(proxy, "scrollbarRef", 40);
}

function getForm(val) {
  projectId.value = val;
  loading1.value = true;
  activities.value = [];
  list.value = [];
  getTimeLine(projectId.value).then((res) => {
    res.data.forEach((item, index) => {
      if (index + 1 == res.data.length) {
        item.color = "red";
      } else if (index == 0) {
        item.type = "primary";
      } else {
        item.type = "success";
      }
    });
    activities.value = res.data;
    if (activities.value && activities.value.length > 0) {
      nextTick(function () {
        handleTimelineItem(activities.value[0]);
      });
    }
    loading1.value = false;
  });
}

function handleTimelineItem(val) {
  loading2.value = true;
  progressType.value = parseInt(val.progressType);
  progressName.value = val.progressName;
  list.value = [];
  getLineItem(projectId.value, val.progressType).then((res) => {
    if (val.progressType == 1 || val.progressType == 2 || val.progressType == 4) {
      list.value = res.data.flowList;
    } else if (val.progressType == 3 || val.progressType == 5 || val.progressType == 6) {
      list.value = res.data;
    }
    loading2.value = false;
  });
  if (val.progressType != 1 && val.progressType != 2) {
    getCountForm(projectId.value, val.progressType).then((res) => {
      countForm.value = res.data;
    });
  }
}

function getTimeLineType(item) {
  if (!item.progressRate || item.progressRate == "") {
    return timeLineTypes.value[4];
  }
  if (item.progressRate == "100%") {
    return timeLineTypes.value[1];
  } else {
    const progressRates = item.progressRate.split("/");
    if (progressRates.length > 1) {
      try {
        if ((parseInt(progressRates[0]) / parseInt(progressRates[1])) * 100 == 100) {
          return timeLineTypes.value[1];
        }
      } catch (e) {
        timeLineTypes.value[0];
      }
    }
  }
  return timeLineTypes.value[0];
}

function refreshProgress(){
  loading1.value = true;
  getProgress(projectId.value).then(res => {
    getForm(projectId.value);
  }).catch(res => {
    loading1.value = false;
  })
}
defineExpose({
  getForm,
});

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>

<style scoped lang="scss">
:deep(.el-timeline) {
  padding-left: 5px;
}
:deep(.el-link__inner) {
  flex-direction: column !important;
}
// :deep(.el-scrollbar__view) {
//   height: auto !important;
// }
</style>
